<template>
  <div id="foot">
    <footer>
      <div class="containers">
        <div class="footer_right">
          <div class="footer_r_img"><img src="./../../public/img/gongzh.jpg" alt=""></div>
          <p>{{$t("Footer.OfficialAccounts")}}</p>
        </div>
        <div class="row">
          <div class="text-center">
            <div class="foot_img"><img src="../../public/img/logo9.png" class="logo-footer" /></div>
            <ul class="social">
              <li class="wow bounceIn">
                <a href="javascript:void(0);">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="wow bounceIn" data-wow-delay="0.1s">
                <a href="javascript:void(0);">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="wow bounceIn" data-wow-delay="0.2s">
                <a href="javascript:void(0);">
                  <i class="fa fa-dribbble"></i>
                </a>
              </li>
              <li class="wow bounceIn" data-wow-delay="0.3s">
                <a href="javascript:void(0);">
                  <i class="fa fa-behance"></i>
                </a>
              </li>
              <li class="wow bounceIn" data-wow-delay="0.4s">
                <a href="javascript:void(0);">
                  <i class="fa fa-pinterest"></i>
                </a>
              </li>
              <li class="wow bounceIn" data-wow-delay="0.5s">
                <a href="javascript:void(0);">
                  <i class="fa fa-google"></i>
                </a>
              </li>
            </ul>
            <div class="bottom_text"><a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备18151619号</a><i class="nbsp"></i><i class="nbsp"></i>广州市优粤家科技有限公司<i class="nbsp"></i>版权所有</div>
          </div>
        </div>
        <div class="footer_r_phone">
          <p>{{$t("Footer.telephone")}}：( 周一至周六，9:00 - 6:00 )</p>
          <h4>020-31360103</h4>
          <h4>400-0310-103</h4>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="less" scoped>
@import "../../public/css/font-awesome.css";
#foot {
  min-width: 1190px;
  // position: relative;
}
footer {
  padding: 40px 0px;
  padding-top: 0px;
  background-color: black;
}
.containers {
  display: flex;
  justify-content: center;
}
.foot_img {
  height: 120px;
  .logo-footer {
    height: 100%;
    margin-bottom: 0px;
  }
}

.social {
  display: flex;
  justify-content: center;
  li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0px 5px;
    border-radius: 50%;
    overflow: hidden;
    transition-duration: 0.4s;
    i {
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 17px;
      color: white;
    }
  }
  li:hover {
    transition-duration: 0.4s;
    background-color: white;
    i {
      color: black;
    }
  }
}
.bottom_text {
  margin-top: 10px;
  .nbsp {
    padding:0px 5px;
  }
  a {
    font-weight: 100;
  }
  a:visited { 
    color: white; 
    text-decoration: none;
  }
}
.row {
  margin-right: 5%;
  margin-left: 5%;
}
.footer_right {
  margin-top: 35px;
  width: 267px;
  .footer_r_img {
    height: 120px;
    img {
      height: 100%;
    }
  }
  P {
    padding: 0px;
    margin: 0px;
  }
}
.footer_r_phone {
  margin-top: 60px;
}
</style>